/**
 * 登陆框
 */
import React from 'react'
import  './SignInBox.scss';
//引入图片库
import imagesStore from '../../assets/lib/imagesStore'

export default class SignInBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    /**
     * 设置各项表单元素的值
     */
    setFormValue = (e) => {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    submitSignUpInfo = (e) => {
        e.preventDefault();
        // 将表单数据转换为查询参数格式
        const params = new URLSearchParams();
        params.append('account', this.state.account);
        params.append('adminPwd', this.state.adminPwd);

        // 请求登录接口
        React.axios.post(`/store-manage/gw1901/admin_sign-in.php`, params).then(res => {
            // 如果包含登录成功的文本，则跳转到管理首页
             //成功则返回一个对象object
            //失败则返回一个字符串string
            if(typeof(res.data)==="object") {
                // 请求获取用户名的接口
                React.axios.get(`/store-manage/gw1901/admin_nickname.php?account=${this.state.account}`).then(res => {
                    // 通过会话存储设置昵称
                    sessionStorage.setItem('nickname', res.data);
                    // 执行跳转到管理首页的方法
                    this.props.goManagePage();
                });
            } 
            // 提示服务器返回的错误
            else {
                alert(res.data);
            }
        })
    }

    //渲染界面
    render() {
        return (
            <div className="container1">
                <div className="loginBox">
                {/* 登陆内容 */}
                    <h1>登泰山之巅</h1>
                    <form 
                        autoComplete="off"
                        onSubmit={this.submitSignUpInfo}
                    >
                        <div className="content">
                            <div>
                                <div>
                                    <label>江湖绰号：</label>
                                    <input 
                                        name="account" 
                                        type="text" 
                                        placeholder="请输入账号或手机号" 
                                        onChange={this.setFormValue} 
                                    />
                                </div>
                                <div>
                                    <label>口令暗号：</label>
                                    <input 
                                        name="adminPwd" 
                                        type="password" 
                                        placeholder="请输入密码" 
                                        onChange={this.setFormValue}  
                                    />
                                </div>
                                <div  className="switchLogin">
                                    <p>骚年！某观汝骨骼惊奇，天赋异禀,乃百年难遇之武学奇才。来<span onClick={() => {
                                        this.props.switchLoginBox()
                                    }}>注册</span>个账号吧。</p>
                                </div>
                            </div>
                            <div className="QRcode">
                                    <p>少年！关注我们藏经阁公众号领取武功秘籍《葵花宝典》，成就传奇人生吧！！</p>
                                    <img 
                                        src={imagesStore.img2} 
                                        alt="图片加载中" 
                                    />
                            </div>
                        </div>
                        <div className="submitIn">
                            <button type="submit">闯荡江湖</button>
                        </div>
                    </form>
                </div>
            </div>
        );
    }
}